<template>
    <div class="page-header">
        <div class="page-title">用户管理</div>
        <el-button type="primary" @click="showAddDialog = true">添加用户</el-button>
    </div>
    <div class="search-bar">
        <span>用户名：</span>
        <el-input v-model="searchQuery.uname" style="width: 240px" placeholder="请输入用户名" />

        <span>用户姓名：</span>
        <el-input v-model="searchQuery.username" style="width: 240px" placeholder="请输入用户姓名" />

        <span>用户手机号：</span>
        <el-input v-model="searchQuery.uphone" style="width: 240px" placeholder="请输入用户手机号" />

        <el-button type="primary" @click="getList" class="search-btn">搜索</el-button>
        <el-button type="default" @click="resetSearch">重置</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%; margin-top: 20px" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="uname" label="用户名" width="130" />
        <el-table-column prop="username" label="姓名" width="130" />
        <el-table-column prop="uemail" label="邮箱" width="200" />
        <el-table-column prop="uphone" label="手机号" width="150" />
        <el-table-column prop="uarea" label="地区" width="140" />
        <el-table-column prop="upoints" label="积分" width="120" />
        <el-table-column label="操作" width="150">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" v-model="showAddDialog" width="30%">
        <el-form :model="newUser" label-width="100px">
            <el-form-item label="用户名">
                <el-input v-model="newUser.uname" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="newUser.username" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="newUser.uemail" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="newUser.uphone" />
            </el-form-item>
            <el-form-item label="地区">
                <el-input v-model="newUser.uarea" />
            </el-form-item>
            <el-form-item label="积分">
                <el-input v-model="newUser.upoints" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showAddDialog = false">取消</el-button>
                <el-button type="primary" @click="addUser">确定</el-button>
            </span>
        </template>
    </el-dialog>

      <!-- 编辑用户对话框 -->
      <el-dialog title="编辑用户" v-model="showEditDialog" width="30%">
        <el-form :model="editUser" label-width="100px">
            <el-form-item label="用户名">
                <el-input v-model="editUser.uname" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="editUser.username" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="editUser.uemail" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="editUser.uphone" />
            </el-form-item>
            <el-form-item label="地区">
                <el-input v-model="editUser.uarea" />
            </el-form-item>
            <el-form-item label="积分">
                <el-input v-model="editUser.upoints" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showEditDialog = false">取消</el-button>
                <el-button type="primary" @click="updateUser">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 对话框显示状态
const showAddDialog = ref(false);
const showEditDialog = ref(false);

// 新用户信息
const newUser = ref({
    uname: '',
    username: '',
    uemail: '',
    uphone: '',
    uarea: '',
    upoints: ''
});


// 编辑用户的方法
const handleEdit = (index, row) => {
    // 填充编辑用户信息
    editUser.value = { ...row };
    showEditDialog.value = true;
}

const editUser = ref({
    id: null,
    uname: '',
    username: '',
    uemail: '',
    uphone: '',
    uarea: '',
    upoints: ''
});


async function updateUser() {
    try {
        await axios.post('/api/user/update', editUser.value);
        ElMessage.success('用户更新成功');
        showEditDialog.value = false;
        getList(); // 刷新用户列表
    } catch (error) {
        ElMessage.error('用户更新失败');
    }
}

// 分页相关数据
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(5);

// 表格数据
const tableData = ref([]);

// 搜索框输入框的值
const searchQuery = ref({});

// 获取用户列表数据的方法
async function getList() {
    try {
        const res = await axios.get('/api/user/list', {
            params: {
                uName: searchQuery.value.uname,
                username: searchQuery.value.username,
                uPhone: searchQuery.value.uphone,
                pageNum: pageNum.value,
                pageSize: pageSize.value
            }
        });
        tableData.value = res.data.data.list;
        total.value = res.data.data.total; // 总记录数
    } catch (error) {
        ElMessage.error('获取数据失败');
    }
}
const resetSearch = () => {
    searchQuery.value = {
        uname: '',
        username: '',
        uphone: ''
    };
    pageNum.value = 1;
    pageSize.value = 5;
    getList();
};

// 选择变化事件处理
const handleSelectionChange = (selection) => {
    console.log('选中的行：', selection);
};

// 分页大小改变事件
const handleSizeChange = (val) => {
    pageSize.value = val;
    getList();
};

// 分页页码改变事件
const handleCurrentChange = (val) => {
    pageNum.value = val;
    getList();
};

// 添加用户的方法
async function addUser() {
    try {
        await axios.post('/api/user/add', newUser.value);
        ElMessage.success('用户添加成功');
        showAddDialog.value = false;
        getList(); // 刷新用户列表
    } catch (error) {
        ElMessage.error('用户添加失败');
    }
}

// 删除用户的方法
async function handleDelete(index, row) {
    ElMessageBox.confirm('确定要删除该用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            await axios.delete(`/api/user/del/${row.id}`);
            ElMessage.success('用户删除成功');
            getList(); // 刷新用户列表
        } catch (error) {
            ElMessage.error('用户删除失败');
        }
    }).catch(() => {
        ElMessage.info('已取消删除');
    });
}

// 页面加载时获取数据
onMounted(() => {
    getList();
});
</script>

<style scoped>
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

.page-title {
    font-weight: bold;
    padding-bottom: 10px;
}

.search-bar {
    margin: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.search-btn {
    margin-left: 10px;
}

.temp{
    margin: 5px;
}
</style>